跳到主要内容

Type, class, and ID selectors

全局选择器​

全局选择器，是由一个（*）代指的，用于选择文章中的所有内容（或者是父元素中的所有内容，比如，它紧随在其他元素以及邻代运算符之后的时候）

* {
  margin: 0;
}

它一般用于比较特殊的情况：

使用全局选择器，让选择器更易读​

比如我们想选中<article>元素的第一子元素，不论它是什么元素，都给它加粗，我可以将:first-child选择器（我们将会在伪类和伪元素课中进一步了解）用作<article>元素选择器的一个后代选择器：

article :first-child {
}

但是这会和article:first-child混淆，而后者选择了作为其他元素的第一子元素的<article>元素。 为了避免这种混淆，我们可以向:first-child选择器加入全局选择器，这样选择器所做的事情很容易就能看懂。选择器正选中<article>元素的_任何_第一子元素：

article *:first-child {
}

Note：这个可能比较难懂，多理解一下就懂了。

指向特定元素的类​

用不同方式高亮一个带有highlight类的<span>和带有 highlight类的<h1>标题。

span.highlight {
	background-color: yellow;
}

h1.highlight {
	background-color: pink;
}

这种方式使 CSS 没那么可复用，因为类现在只会应用到那个特定元素，在认为规则也该应用到其他元素的时候，你会需要另外加上一个选择器。

多个类被应用的时候指向一个元素​

你能对一个元素应用多个类，然后分别指向它们，或者仅仅在选择器中存在所有这些类的时候选择这一元素。在你的站点上，构建可以以不同方式组合起来的组件的时候，这会有用。

有以下奇怪的写法：

.notebox {
  border: 4px solid #666;
  padding: .5em;
}

.notebox.warning {
  border-color: orange;
  font-weight: bold;
}

.notebox.danger {
  border-color: red;
  font-weight: bold;
}
<div class="notebox">
    This is an informational note.
</div>

<div class="notebox warning">
    This note shows a warning.
</div>

<div class="notebox danger">
    This note shows danger!
</div>

<div class="danger">
    This won't get styled — it also needs to have the notebox class
</div>

最后一个<div>不会被应用，因为他只有 danger class，它需要 notebox 来应用。 想法：class的空格好像很特殊，似乎表示应用了多种class。

ID选择器​

ID 选择器开头为#而非句点，不过基本上和类选择器是同种用法。可是在一篇文档中，一个 ID 只会用到一次。它能选中设定了id的元素，你可以在 ID 前面加上类型选择器，只指向元素和 ID 都匹配的类。

#one {
    background-color: yellow;
}

h1#heading {
    color: rebeccapurple;
}
<h1 id="heading">ID selector</h1>
<p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo
    melon azuki bean garlic.</p>

<p id="one">Gumbo beet greens corn soko <strong>endive</strong> gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard
    greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
备注

Note：ID有很高的优先级，所以一般用class而不用ID。但是如果你没有权限用class的话，这将是你唯一的办法。